﻿@{
    ViewBag.Title = "Home Page";
    
}
<script type="text/javascript">
    var $ = function (id) {
        return "string" == typeof id ? document.getElementById(id) : id;
    };

    function addEventHandler(oTarget, sEventType, fnHandler) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventType, fnHandler, false);
        } else if (oTarget.attachEvent) {
            oTarget.attachEvent("on" + sEventType, fnHandler);
        } else {
            oTarget["on" + sEventType] = fnHandler;
        }
    };

    var Class = {
        create: function () {
            return function () {
                this.initialize.apply(this, arguments);
            };
        }
    };
    var Extend = function (destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    };
    var Bind = function (object, fun) {
        return function () {
            return fun.apply(object, arguments);
        };
    };
    var DateSelector = Class.create();
    DateSelector.prototype = {
        initialize: function (oYear, oMonth, oDay, options) {
            this.YearSelector = $(oYear); //ﾄ・｡ﾔﾔﾏ・
            this.MonthSelector = $(oMonth); //ﾔﾂﾑ｡ﾔﾔﾏ・
            this.DaySelector = $(oDay); //ﾈﾕﾑ｡ﾔﾔﾏ・

            this.SetOptions(options);

            var dt = new Date(), iMonth = parseInt(this.options.Month), iDay = parseInt(this.options.Day), iMinYear = parseInt(this.options.MinYear), iMaxYear = parseInt(this.options.MaxYear);

            this.Year = parseInt(this.options.Year) || dt.getFullYear();
            this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1;
            this.Day = iDay > 0 ? iDay : dt.getDate();
            this.MinYear = iMinYear && iMinYear < this.Year ? iMinYear : this.Year;
            this.MaxYear = iMaxYear && iMaxYear > this.Year ? iMaxYear : this.Year;
            this.onChange = this.options.onChange;

            //ﾄ・靹ﾃ
            this.SetSelect(this.YearSelector, this.MinYear - 100, this.MaxYear - this.MinYear + 1, this.Year - this.MinYear);
            //ﾔﾂﾉ靹ﾃ
            this.SetSelect(this.MonthSelector, 1, 12, this.Month - 1);
            //ﾈﾕﾉ靹ﾃ
            this.SetDay();

            //ﾈﾕﾆﾚｸﾄｱ萍ﾂｼ
            addEventHandler(this.YearSelector, "change", Bind(this, function () {
                this.Year = this.YearSelector.value; this.SetDay(); this.onChange();
            }));
            addEventHandler(this.MonthSelector, "change", Bind(this, function () {
                this.Month = this.MonthSelector.value; this.SetDay(); this.onChange();
            }));
            addEventHandler(this.DaySelector, "change", Bind(this, function () {
                this.Day = this.DaySelector.value; this.onChange();
            }));
        },
        //ﾉ靹ﾃﾄｬﾈﾏﾊﾔ
        SetOptions: function (options) {
            this.options = {//ﾄｬﾈﾏﾖｵ
                Year: 0, //ﾄ・
                Month: 0, //ﾔﾂ
                Day: 0, //ﾈﾕ
                MinYear: 0, //ﾗ隯｡ﾄ・ﾝ
                MaxYear: 0, //ﾗ鋗・ﾝ
                onChange: function () { } //ﾈﾕﾆﾚｸﾄｱ萍ｱﾖｴﾐﾐ
            };
            Extend(this.options, options || {});
        },
        //ﾈﾕﾉ靹ﾃ
        SetDay: function () {
            //ﾈ｡ｵﾃﾔﾂｷﾝﾌ・
            var daysInMonth = new Date(this.Year, this.Month, 0).getDate();
            if (this.Day > daysInMonth) { this.Day = daysInMonth; };
            this.SetSelect(this.DaySelector, 1, daysInMonth, this.Day - 1);
        },
        //selectﾉ靹ﾃ
        SetSelect: function (oSelect, iStart, iLength, iIndex) {
            //ﾌ晴ﾓoption
            oSelect.options.length = iLength;
            for (var i = 0; i < iLength; i++) { oSelect.options[i].text = oSelect.options[i].value = iStart + i; }
            //ﾉ靹ﾃﾑ｡ﾖﾐﾏ・
            oSelect.options[iIndex].setAttribute("selected", "true");
        }
    };
</script>
<select id="idYear">
</select>
<select id="idMonth">
</select>
<select id="idDay">
</select>
<br />
ﾄ耜｡ﾔﾄﾈﾕﾆﾚ｣ｺ<span id="idShow"></span>
<script>
    var ds = new DateSelector("idYear", "idMonth", "idDay", {
        MaxYear: new Date().getFullYear(),
        onChange: function () { $("idShow").innerHTML = this.Year + "/" + this.Month + "/" + this.Day; }
    });

    ds.onChange();
</script>
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
